<template>
    <div style="text-align:center;">
        <div style="font-size:18px;text-align:left;">{{showText}}</div>
        <hr><br>
        <el-form ref="form1" :model="form1"  label-width="100px" >
            <div style="width:98%;max-width:1400px;margin:0 auto;" >
              <el-form-item label="资讯标题">
                <el-input v-if="this.newsId"  v-model="form1.title"></el-input>
                <el-input v-else v-model="form1.title" readeonly></el-input>
              </el-form-item>
              <el-form-item label="资讯图片:">
                <el-upload  style="text-align:left"
                  class="avatar-uploader"
                  action="http://www.chenyekeji.com/21market/image/upload2"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="资讯简介">
                <el-input v-model="form1.simpleText"></el-input>
              </el-form-item>
              <el-form-item label="资讯内容" class="editor">
                  <div style="text-align:left;">
                    <umeditor v-bind:value="form1.context" v-bind:config=config  v-on:input="input" ></umeditor>
                  </div>
              </el-form-item>
            </div>
        </el-form>
        <div class="footer" style="text-align:right;padding-right:50px;margin-bottom: 60px;">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="handleComfirm">确 定</el-button>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    //import { quillEditor } from 'vue-quill-editor';
    import umeditor from '../common/UMeditor.vue';


  export default {
    data() {
      return {
        showText: '',
        form1: {
          id: '',
          img: '',
          simpleText: '',
          title: '',
          context:'',
        },
        editorOption:{  //编辑器选项

        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 320,
        },
        newsId: '',
        news: null,
        imageUrl: '',
      }
    },
    created() {
      this.newsId = this.$route.query.id
      if(this.newsId){
        this.showText = "资讯详情"
      }else{
        this.showText = "新增资讯"
        for(var key in this.form1){
          this.form1[key] = null
        }
      }
    },
    mounted:function(){
      if(this.newsId){
        this.getDetailById()
      }
      this.getUser()
    },
    methods: {
      getDetailById() {
        if(this.newsId){
          this.myajax("/information/get/"+this.newsId,{},res=>{
            if(res.code == 1000){
              // console.log(res)
              this.form1 = res.data
              this.imageUrl = res.data.img
            }
          })
        }
      },
      handleComfirm(){
        let _data = {
            context: this.form1.context,
            img: this.form1.img,
            title: this.form1.title,
            simpleText: this.form1.simpleText, 
        }
        if(!this.newsId){
          console.log(_data)
          this.myajax("/information/create",_data,res=>{
            if(res.code == 1000){
              this.$message({
                type: 'success',
                message: '添加成功!',
                duration: 2000
              });
              this.imageUrl = ""
              for(var key in this.form1){
                this.form1[key] = ""
              }
              this.$router.go(-1)
            }
          })
        }else{
          _data.id = this.form1.id
          console.log(_data)
          this.myajax("/information/update",_data,res=>{
            if(res.code == 1000){
              this.$message({
                type: 'success',
                message: '添加成功!',
                duration: 2000
              });
              this.imageUrl = ""
              for(var key in this.form1){
                this.form1[key] = ""
              }
              // this.$router.go(-1)
            }
          })
        }
      },
      cancel() {
        this.$router.go(-1)
      },
      input(val){
        this.form1.context = val.content
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.form1.img = Vue.prototype.$host + res
        console.log(this.imageUrl)
        console.log(res)
      },
      beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getUser() {
        let data = {
          pageNumber: 1,
          pageSize: 10,
        }
        this.myajax("/user_entity/list",data,res=>{
          if(res.code == 1000){
            console.log(res)
          }
        })
      },
    },
    components: {
       // quillEditor,                              // 声明组件quillEditor
        umeditor
    },
  }
</script>
<style>
    .el-vue-amap-container{
        height: 400px;
    }

    #amap{
        height:100px;
    }
    .search-box {
        position: relative;
        /*top: 35px;*/
        left: 10px;
        height: 30px;
        width: 90%;
        border:1px solid #bbccaa;
    }
    input,textarea{
        max-width: 700px;
    }
    .search-box-wrapper input{
      max-width: 100%;
    }
    .editor{
        max-width: 1400px;
    }
    .mapKey{
        position: absolute;
        top: 0px;
        left: 590px;
        width: 110px;
        z-index: 1;
    }
    img{
      max-width: 100%;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #bfcbd9;
      border-radius: 6px;
    }
    .el-upload {
      display: inline-block;
      text-align: center;
      cursor: pointer;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 140px;
      height: 140px;
      line-height: 140px;
      text-align: center;
    }
    .avatar {
      width: 260px;
      height: 120px;
      display: block;
    }
    .avatar {
      width: 140px;
      height: 140px;
      display: block;
    }
</style>